<template>
  <div>
    <div style="display:flex;margin-bottom:1%">
      <a-card style="width:19.5%;margin-right:0.5%;text-align: center;" v-for="item in title" :key="item">
          <div>{{ item }}</div>
          <div style="font-size:40px;font-weight:500">4961</div>
          <div style="display:flex;width:70%;margin:auto">
            <div style="margin-right:7%">环比</div>
            <div style="margin-right:7%;color:red">▲</div>
            <!-- <div style="margin-right:7%;color:green" v-if="aa">▼</div> -->
            <div style="margin-right:7%">11.81%</div>
            <div style="margin-right:7%">524</div>
          </div>
      </a-card>
    </div>
    <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
      <div style="margin-bottom:2%">
        <a-card>
          <div style="display:flex;align-items: center;justify-content: space-between;">
            <div style="font-size:25px;font-weight:500;color:black">新增封堵趋势</div>
            <div style="display:flex;align-items: center;justify-content:space-around;width:50%">
              <div :class="style" @click="changestyle">当天</div>
              <div :class="style1" @click="changestyle1">近一周</div>
              <div :class="style2" @click="changestyle2">近一月</div>
              <a-form-model-item :wrapper-col="{ span: 24 }">
                <a-range-picker/>
              </a-form-model-item>
              <img src="@/assets/u125.png" style="width:7%">
            </div>
          </div>
        </a-card>
        <a-card>
          <div style="display:flex">
              <a-form-model-item label="数据来源">
                <a-select style="width:100%;">    
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="诈骗类型">
                <a-select style="width:100%;">    
                </a-select>
              </a-form-model-item>
          </div>
          <div ref="charts_line" class="line-charts" style="height: 400px;"></div>
        </a-card>
      </div>
      <div style="margin-bottom:2%">
        <a-card>
          <div style="display:flex;align-items: center;justify-content: space-between;">
            <div style="font-size:25px;font-weight:500;color:black">封堵推送趋势</div>
            <div style="display:flex;align-items: center;justify-content:space-around;width:50%">
              <div :class="style" @click="changestyle">当天</div>
              <div :class="style1" @click="changestyle1">近一周</div>
              <div :class="style2" @click="changestyle2">近一月</div>
              <a-form-model-item :wrapper-col="{ span: 24 }">
                <a-range-picker/>
              </a-form-model-item>
              <img src="@/assets/u125.png" style="width:7%">
            </div>
          </div>
        </a-card>
        <a-card>
          <div style="display:flex">
              <a-form-model-item label="数据来源">
                <a-select style="width:100%;">    
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="诈骗类型">
                <a-select style="width:100%;">    
                </a-select>
              </a-form-model-item>
          </div>
          <div ref="charts_line1" class="line-charts" style="height: 400px;"></div>
        </a-card>
      </div>
      <div style="margin-bottom:2%">
        <a-card>
          <div style="display:flex;align-items: center;justify-content: space-between;">
            <div style="font-size:25px;font-weight:500;color:black">运营商封堵占比情况</div>
            <div style="display:flex;align-items: center;justify-content:space-around;width:50%">
              <div :class="style" @click="changestyle">当天</div>
              <div :class="style1" @click="changestyle1">近一周</div>
              <div :class="style2" @click="changestyle2">近一月</div>
              <a-form-model-item :wrapper-col="{ span: 24 }">
                <a-range-picker/>
              </a-form-model-item>
              <img src="@/assets/u125.png" style="width:7%">
            </div>
          </div>
        </a-card>
        <a-card>
          <div ref="charts_pie" class="line-charts" style="height: 400px;"></div>
        </a-card>
      </div>
    </a-form-model>
  </div>
</template>
<script>
export default {
  
data () {
  return {
    title:['当日新增封堵总数','当日封堵推送总数','当日误封堵申诉总数','当日新增验证总数','当日验证反馈总数',],
    labelCol: { span: 3 },
    wrapperCol: { span: 8 },
    style:'default',
    style1:'default',
    style2:'default'
  }
},
mounted () {
  this.playCharts()
},
methods: {
  changestyle(){
    if(this.style == 'default'){
      this.style = 'change'
      this.style1 = 'default'
      this.style2 = 'default'
    }
    else{}
  },
  changestyle1(){
    if(this.style1 == 'default'){
      this.style1 = 'change'
      this.style = 'default'
      this.style2 = 'default'
    }
    else{}
  },
  changestyle2(){
    if(this.style2 == 'default'){
      this.style2 = 'change'
      this.style1 = 'default'
      this.style = 'default'
    }
    else{}
  },
  playCharts() {
      let myChart = this.$echarts.init(
        this.$refs.charts_line
      );
      let myChart1 = this.$echarts.init(
        this.$refs.charts_line1
      );
      let myChart2 = this.$echarts.init(
        this.$refs.charts_pie
      );
      let option = {
      xAxis: {
        type: 'time', 
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [
            ['2023-02-16 00:00',100],
            ['2023-02-16 01:00',200],
            ['2023-02-16 02:00',300],
            ['2023-02-16 03:00',400],
            ['2023-02-16 04:00',300],
            ['2023-02-16 05:00',600],
            ['2023-02-16 06:00',800],
            ['2023-02-16 07:00',1000],
            ['2023-02-16 08:00',1000],
            ['2023-02-16 09:00',1000],
            ['2023-02-16 10:00',1000],
            ['2023-02-16 11:00',1000],
            ['2023-02-16 12:00',1000],
          ],
          type: 'line'
        }
      ]
      };

      let option1 = {
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '100%',
            data: [
              { value: 23289, name: '电信封堵量' },
              { value: 24260, name: '移动封堵量' },
              { value: 24258, name: '联通封堵量' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      // 绘制图表
      myChart.setOption(option);
      myChart1.setOption(option);
      myChart2.setOption(option1);
    },
}
}
</script>

<style lang="less" scoped>
.default{
  font-size:18px;
  color:black
}
.change{
  font-size:18px;
  color:#1890ff
}
.ant-form-item{
  margin-bottom: 0;
  width:40%
}
</style>